<template>
	<view>
	    <view class="login-content">
			
			
			<view>
				<view class="houseId row-center" style="margin-top: 20rpx;">
				{{ repeatHouseId ? '重复卡片位于鸽舍号:' + repeatHouseId : '无重复卡片' }}</view>
				<view class="uni-nav-bar">
					<span>|</span> 
					<br>重复卡片位于<br>  
					<span>|</span>
				</view>
			</view>
			
			
			<view class="houseId row-center" style="background-color:#ff7c10">
				{{ this.addNfcId ? '已读取的卡号:' + this.addNfcId : '请靠近NFC卡片读取卡号' }}
			</view>
			
			<view>
				<view class="uni-nav-bar">
					<span>|</span> 
					<br>已添加至<br>  
					<span>|</span>
				</view>
				<view class="houseId row-center">{{ show_addhouseid ? '鸽舍号' + show_addhouseid : '鸽舍号' }}</view>
			</view>
			
	    	<!-- 顶部提示 -->
	    	<u-toast ref="uToast" />
	    </view>
	</view>	
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import { reqAddHouse } from '@/api/index.js'
	import { format } from '@/utils/format_HouseId.js'
	import colorGradient from '../../components/uview-ui/libs/function/colorGradient'
	
	export default {
		data() {
			return {
				// 两个显示重复卡片 和已添加的卡片未知
				repeatHouseId : '',
				show_addhouseid: '',
				
				successMessage: '',
				showClearIcon: false, //是否显示清除按钮
				chooseSiteId: 1,
			}
		},
		computed: {
			...mapGetters(['show_nfcId', 'addNfcId']),
			nfcId() {  //this.nfcId 相当于store的addNfcId
				return this.addNfcId;
			}
		},
		mounted() {
			// this.$store.commit('SETADDNFC','c56d7478');
			// this.houseAdd();
		},
		watch: {
			nfcId(newvalue, oldvalue) { //this.nfcId 相当于监听store中的addNfcId
				this.repeatHouseId = '',
				this.show_addhouseid = '',
				this.houseAdd();
			}
		},
		methods: {
			// 发送添卡请求
			async houseAdd() {
				console.log("nfcId:", this.nfcId);
				this.$loading();
				const obj = {
					siteId: uni.getStorageSync('siteId'),
					houseId: this.nfcId
				};
				try {
					const data = await reqAddHouse(obj);
					if (data.code === 200) {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 1500
						});
						this.show_addhouseid = format(data.newHouse.house_id);
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				} catch (error) {
					// 处理错误，获取状态码和响应数据
					if (error.response) {
						const responseData = error.response.data;
						const statusCode = error.response.data.code;
						console.log('Error status code:', statusCode);
						console.log('Response data:', responseData);
						if (statusCode == 400) {
							uni.showToast({
								title: responseData.msg || 'Bad Request',
								icon: 'none',
								duration: 2000
							});
							this.repeatHouseId = format(responseData.houseId);
						} else {
							uni.showToast({
								title: responseData.msg || 'Request Failed',
								icon: 'none',
								duration: 1500
							});
						}
					} else if (error.request) {
						console.log('No response received:', error.request);
						uni.showToast({
							title: 'No response from server',
							icon: 'none',
							duration: 1500
						});
					} else {
						console.log('Error', error.message);
						uni.showToast({
							title: 'Error occurred',
							icon: 'none',
							duration: 1500
						});
					}
				}
			},
			clearInput(event) {
				this.newWarehouseNumber = event.detail.value;
				this.showClearIcon = event.detail.value.length > 0;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.houseId {
		width: 100%;
		margin: 10rpx auto;
		padding: 18.12rpx 18.12rpx;
		font-size: 39.86rpx;
		border-radius: 14.49rpx;
		color: #fff;
		background-color: #7d9ad2;
	}
	
	.login-content {
		width: 100%;
		height: 80vh;
		text-align: center;
		color: #333333;
	}

	.add-title {
		padding-top: 15rpx;
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 62rpx;
	}

	.login-content input {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 50rpx;
		text-align: center;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.iphone,
	.password,
	.test {
		position: relative;
		margin-bottom: 60rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 36rpx;
		right: 60rpx;
	}

	.test-btn,
	.password-btn {
		color: #ff8b33;
		font-size: 30rpx;
		text-align: right;
	}

	.get-test {
		color: #ff8b33;
		font-size: 30rpx;
		width: 244rpx;
		height: 100rpx;
		border: 1px solid #FF8B33;
		border-radius: 50rpx;
		line-height: 100rpx;
	}

	.test {
		display: flex;
		justify-content: space-between;
	}

	.add-btn {
		margin-top: 7vh;
		position: relative;
		left: 50%;
		transform: translate(-50%);
		width: 50vw;
		height: 90rpx;
		background: #FF8B33;
		border-radius: 72rpx;
		color: #fff;
		font-size: 40rpx;
		text-align: center;
		line-height: 90rpx;
	}
</style>
